<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>鞋码助手</title>
<link rel="stylesheet" href="../amaze/assets/css/amazeui.min.css" />
<link rel="stylesheet" href="../amaze/assets/css/admin.css">
<link rel="stylesheet" href="../amaze/pc.css">

<link rel="stylesheet" href="../font/stylesheet.css">
<!--鞋码滚动主要样式-->
<link rel="stylesheet" type="text/css" href="../css/elastislide.css" />

<script src="../amaze/assets/js/jquery.min.js"></script>
<script src="../amaze/assets/js/amazeui.min.js"></script>
<script src="../amaze/assets/js/app.js"></script>
<script src="../js/buyerindex.js"></script>

<!-- 鞋码滚动js -->
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/jquery.elastislide.js"></script>

<style>
@media only all
    and (min-width :1024px) {
    #media{
        width: 500px;
        margin:0px auto;
    }
    }
.round {
	width: 25px;
	height: 25px;
	padding-left: 1px;
	border: 1px solid #dedede;
	-moz-border-radius: 12px; /* Gecko browsers */
	-webkit-border-radius: 12px; /* Webkit browsers */
	border-radius: 12px; /* W3C syntax */
	background-color: #e3e3e3;
	margin: 0px auto;
}

table {
	border-collapse: collapse;
}

th, td {
	padding: 0.3em 1em;
}

.es-carousel ul {
	display: block;
}

.a1 {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
}

.bg {
	background-color: #e0690c;
}

#shoe li {
	
}

#carousel2 {
	font-family: nexa_rust_slabblack_shadow_01;
}

#carousel2 img {
	margin-top: -20px;
}

@media only all
    and (min-width :1024px) {
	    BODY {background-image: URL(../image/frontbg.jpeg);
		background-position: center;
		background-repeat: no-repeat;
		background-size:cover;}
	    #media{
	        width: 500px;
	        height:400px;
	        background-color: white;
	    }
    }
</style>
</head>

<body>
	<div class="am-g" style="text-align: center" id="media">
			
		<div id="mainpanel" >
		<input type="hidden" id="sex" name="sex" value="${sex!}" /> 
		<input type="hidden" id="msg" name="msg" value="${msg!}" />
		<div class="am-g" style="text-align: center; margin: 20px auto; width: 100%; padding: 0px 20px;">
			<img alt="" src="../image/select_3ge.png" width="100%">
		</div>
		<div style="margin-top: 20px;">
			<div class="am-u-sm-centered">
				<#if sex=='0'> <img id="boy" alt="" src="../image/boy_noselect.png" onclick="selectboy()" style="cursor: pointer"> <img id="girl" alt="" src="../image/girl_select.png" onclick="selectgirl()" style="cursor: pointer"> <#else> <img id="boy" alt="" src="../image/boy_select.png" onclick="selectboy()" style="cursor: pointer"> <img id="girl" alt="" src="../image/girl_noselect.png" onclick="selectgirl()" style="cursor: pointer"> </#if>
			</div>
		</div>

		<div class="am-g" style="margin-top: 20px;">

			<div class="am-u-sm-4">
				<img alt="" src="../image/yundongxie.png" id="1" onclick="search(this,1)" style="cursor: pointer; width: 90%">&nbsp;
			</div>

			<div class="am-u-sm-4">
				<#if style=='1'> <img alt="" src="../image/yundongxie.png" id="2" onclick="search(this,2)" style="cursor: pointer; width: 90%">&nbsp; <#else> <img alt="" src="../image/pixiexiuxianxie.png" id="2" onclick="search(this,2)" style="cursor: pointer; width: 90%">&nbsp; </#if>
			</div>

			<div class="am-u-sm-4">
				<#if style=='1'> <img alt="" src="../image/yundongxie.png" id="3" onclick="search(this,3)" style="cursor: pointer; width: 90%">&nbsp; <#else> <img alt="" src="../image/pixiexiuxianxie.png" id="3" onclick="search(this,3)" style="cursor: pointer; width: 90%">&nbsp; </#if>
			</div>
		</div>

		<div style="margin-top: 20px; display: none" id="finish">
			<div style="text-align: center;">
				<button type="button" class="am-btn am-btn-warning am-round" onclick="begintest()">完成选择，开始测码</button>
			</div>
		</div>
	</div>
	</div>
	<input type="hidden" id="logo1" value="-1">
	<input type="hidden" id="logo2" value="-2">
	<input type="hidden" id="logo3" value="-3">
	<input type="hidden" id="size1">
	<input type="hidden" id="size2">
	<input type="hidden" id="size3">
	<input type="hidden" id="ename1">
	<input type="hidden" id="ename2">
	<input type="hidden" id="ename3">

	<input type="hidden" id="style" value="${style!}">
	<input type="hidden" id="sex" value="${sex!}">
	<!-- 鞋碼滚动开始 -->
	<div style="height: 5px;"></div>
	<div class="content" style="display: none">
		<div id="carousel1" class="es-carousel-wrapper">
			<div class="es-carousel">
				<ul id="shoe" style="text-align: center; display: inline-block;">
					<!-- <#if list??> <#list list as shoe>
						<li  style="position: relative;" atr="${shoe.id!}" onclick=selShoeSize('${shoe.id!}','${shoe.en_name!}')>
							<img src="../image/logo/${shoe.en_name!}.png"/>
							<div style="display:none;position: absolute;width: 50px;height: 50px;top:5px;left:0px;background-color: #000000;filter:alpha(opacity=10);-moz-opacity:0.1;opacity:0.1;border: 1px solid #e3e3e3;-moz-border-radius: 31px;-webkit-border-radius: 31px;border-radius:31px; "></div>
						</li>
				    </#list></#if> -->
				</ul>
			</div>
		</div>
		<div style="height: 10px;"></div>
		<div id="carousel2" class="es-carousel-wrapper">
			<div class="es-carousel">
				<ul id="shoesize" style="text-align: center; display: inline-block;">
				</ul>
			</div>
		</div>
	</div>
	<!-- End Elastislide Carousel -->
	<!-- 鞋碼滚动结束 -->
	<!-- content end -->
	<script type="text/javascript">
		//document.getElementById("1").setAttribute("class", "a1");
		/* $('#carousel1').elastislide({
				imageW : 50,
				border : 0
			}); */
	</script>
</body>
</html>